<template>
<div>
	<a-modal
      title="留言板"
      :visible="visible"
      cancelText='取消'
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      width='750px'
      okText='立即发送' :footer="null" class='form-model'>
          <a-form :form="form"  @submit="handleSubmit">
<!--                     <a-row>
                         <a-col :span='12' class='ela-220'>
                            <a-form-item label="联系人：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                              <a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]" placeholder='请填写联系人姓名'/>
                           </a-form-item>
                         </a-col>
                  
                        <a-col :span='12' class='ela-220'>
                            <a-form-item label="联系方式：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                              <a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]" placeholder='请填写联系方式' />
                           </a-form-item> 
                        </a-col>
                    </a-row>
                    <a-row>
                         <a-col :span='12' class='ela-220'>
                            <a-form-item label="公司名称：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                              <a-input v-decorator="['note',{rules: [{ required: false, message: 'Please input your note!' }]}]" placeholder='请填写公司名称'/>
                           </a-form-item>
                         </a-col>
                        <a-col :span='12' class='ela-220'>
                            <a-form-item label="QQ：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                              <a-input v-decorator="['note',{rules: [{ required: true, message: 'Please input your note!' }]}]" placeholder='请填写QQ号码'/>
                           </a-form-item>
                        </a-col>
                    </a-row> -->
                     <a-row :span='24'>
                          <a-col :span='24'>
                               <a-form-item label="留言主题：" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                                <a-input v-decorator="['messageTitle',{rules: [{ required: true, message: '请填写你的主题留言!' }]}]" placeholder='请填写你的主题留言' />
                              </a-form-item>
                          </a-col>
                     </a-row>
                      <a-row>
                          <a-col>
                               <a-form-item label="留言内容：" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                                <a-textarea v-decorator="['messageContent',{rules: [{ required: true, message: '请填写留言内容！' }]}]"  placeholder='请填写您想说的话....' style='height:100px;'/>
                              </a-form-item>
                          </a-col>
                     </a-row>
                    <a-row class='yanzhen-code'>
                    	  <a-col class='ela-140' :span='16'>
                            <a-form-item label="验证码：" :label-col="{ span: 4}" :wrapper-col="{ span: 18 }">
                              <a-input v-decorator="['imgCode',{rules: [{ required: true, message: '请填写验证码!' }]}]" placeholder='请填写验证码' />
                              <!-- <a href="javascript:;">发送验证码</a> -->
                              <img class="img-code" @click="getCodeUrl" :src="codeUrl" />
                           </a-form-item> 
                        </a-col>
                    </a-row>
                      <a-row class='btn-button'>
                        <a-button type="primary" html-type="submit" class='ant-btn-green'>立即发送</a-button>
                        <a-button type="primary" class='ant-btn-grey' @click="cancleShowModal">取消</a-button>
                    </a-row>
                 </a-form>
    </a-modal>
  <!-- 取消留言模态框 -->
    <a-modal
        title="留言板"
        :visible="cancelVisible"
        :confirmLoading="confirmLoading"
        @cancel="sureBack"
        class='cancel-model'  :footer="null">
        <p>
            <img src="./../../static/img/index/tips.png">
            <span>您确定要取消留言吗？</span>
        </p>
         <div class="cancle-btn">
              <a-button type="primary" class='ant-btn-green' @click='returnMessage'>返回留言</a-button>
              <a-button type="primary" class='ant-btn-grey' @click='sureBack' style="background:#F6F6F6;color:#999999;">确定</a-button>
         </div>
      </a-modal>
</div>
</template>
<script>
import { environment } from '@/server/environment'
import AuthMixin from '~/mixins/auth'
	export default {
    mixins: [ AuthMixin ],
	  data() {
	    return {
	      visible: false,
        cancelVisible: false,
        form: this.$form.createForm(this),
	      confirmLoading: false,
        codeUrl: '',
        userId: ''
	    }
	  },
    created() {
      
    },
	  methods: {
      
      // 获取验证码
      getCodeUrl () {
        this.codeUrl = environment.APIUrl+'/gifCode?v=' + new Date().getTime() 
      },
      // 展示留言模态框
	    showModal(id) {
        this.userId = id;
	      this.visible = true;
				this.form.resetFields();
        this.getCodeUrl();
	    },
      // 取消留言
	    handleCancel(e) {
	      this.visible = false
	    },
      // 取消不留言
      cancleShowModal(){
         this.handleCancel();
         this.cancelVisible = true;
      },
      // 返回留言板
      returnMessage(){
        this.cancelVisible = false;
        this.visible = true;
      },
      // 确定取消留言
      sureBack(){
        this.cancelVisible = false;
      },
      //提交留言
      handleSubmit(e){
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
         if(!err) {
          values.receiveUserId = this.userId;
          values.messageType = 2
          // console.log(values)
            this.submitMessage(values);
         }
        });
      },
      //留言提交接口
      async submitMessage (message){
          const res = await this.$store.dispatch('info/submitMessage',message)
          // if (res.status) {
						if(res.code == '0000'){
								this.visible = false
								this.form.resetFields();
								this.$message.success('留言成功！');
						}else{
								this.$message.error(res.message);
						}
          // }
        }
      
	  }
}
</script>
<style lang="scss">
.ant-modal-close{
        right: 32px !important;
        top: -5px !important;
        span{
            width: 11px;
            height: 11px;
           color: #15837A;
           font-size: 16px;
        }
}
.form-model{
.ant-modal-content{
  .ant-btn-grey{
    background:#E9F4F3 !important;
    color: #15837A !important;
  }
	 // width:750px;
	 height:390px;
	.ant-modal-header{
		padding:12px 0 12px 30px;
		background:#E9F4F3;
		.ant-modal-title{
		   font-weight:500;
		   color:#15837A;
		}
	}
	.ant-form{
		label{
			font-size:14px;
			color:#333333;
		}
	}
	.ant-form-item-control{
		input{
		   font-size:14px;
		   color:#999999;
		}
  }
  .ela-220{
	  .ant-form-item-control{
	  	   width:220px;
		   height:40px;
	  }
	  input{
		  width:220px;
		  height:40px;
	 }
  }
  .ela-140{
  	 .ant-form-item-control{
     	 height:40px;	
	 }
	 input{
		 width:140px;
  	     height:40px;	
	 }
   }
  a{
  	color:#15837A;
  	font-size:14px;
  	margin-left:10px;
  }
  .ant-modal-body{
  		padding-bottom:0 !important;
  }
  .yanzhen-code{
  	.ant-form-item-label{
  			margin-left:10px;
  	}
  }
  .btn-button{
  	margin-left:86px;
  	.ant-btn-green{
  		margin-right:24px;
  	}
  }
}
}
//取消留言样式
.cancel-model{
  .ant-modal-content{
      width:565px;
      height:192px;
     .ant-modal-header{
        padding:12px 0 12px 30px;
        background:#E9F4F3;
      .ant-modal-title{
         font-weight:500;
         color:#15837A;
      }
      .ant-modal-close{
            right: 32px !important;
            top: -5px !important;
            .ant-modal-close-x{
              width: 11px;
              height: 11px;
              color: #15837A;
              font-size: 16px;
              display:inline-block;
            }
      }
    }
  }
  .ant-modal-body{
     padding-top:30px !important;
  }
  p{
    text-align:center;
    margin:0;
    img{
      vertical-align:top;
        margin-top: 6px;
        margin-right: 4px;
    }
    span{
      font-size:18px;
      color:#333333;  
    }
  }
  .cancle-btn{
    width: 197px;
    margin:0 auto;
    margin-top:30px;
    .ant-btn-green {
      margin-right: 24px;
    }
  }
} 
</style>